<script lang="ts">
  import { defineComponent, ref, computed } from '@vue/composition-api';
  import OtoButton from '@/components/common/oto-button.vue';
  import MoreFeatures, { FeatureList } from './components/more-features.vue';
  import { MY_ICON_PATHS } from '@/constants/path';
  import { useRouter, ROUTER_PATHS } from '@/constants/router';
  import { UserModule } from '@/store/modules/user.module';
  import { getUserInfo, PersonalMessageDto } from '@/api/user';
  import { useStore } from '@/store';
  import { TokenModule } from '@/store/modules/token.module';
  import { useGoEasyListen, useLoadConversations } from '@/hooks/go-easy.hooks';
  import { onShow } from '@/hooks/uniapp-composition-hooks';
  import { FOLLOW_STATUS } from '@/enum/dynamic.enum';

  export default defineComponent({
    components: {
      OtoButton,
      MoreFeatures
    },
    setup() {
      try {
        useGoEasyListen();
      } catch (error) {
        console.log(error);
      }

      const router = useRouter();

      const userModule = useStore(UserModule);
      const tokenModule = useStore(TokenModule);
      const userMessage = ref<PersonalMessageDto>({
        id: 0,
        avatarUrl: '',
        nickName: '',
        dynamicLoveCount: 0,
        followCount: 0,
        fansCount: 0,
        followStatus: FOLLOW_STATUS.NOT_FOLLOW
      });

      const list = ref<FeatureList>([
        {
          icon: MY_ICON_PATHS.DYNAMIC,
          text: '我的动态',
          url: ROUTER_PATHS.PERSONAL,
          params: {
            id: userModule.userInfo.id
          }
        },
        {
          icon: MY_ICON_PATHS.SETTING,
          text: '我的资料',
          url: ROUTER_PATHS.PERSONAL_USER_MESSAGE
        },
        {
          icon: MY_ICON_PATHS.SHARE,
          text: '推荐给朋友',
          url: ''
        },
        {
          icon: MY_ICON_PATHS.ABOUT,
          text: '关于我们',
          url: ''
        },
        {
          icon: MY_ICON_PATHS.CALL,
          text: '联系我们',
          url: ''
        }
      ]);

      async function getUserMessage() {
        if (!tokenModule.token) return;
        const res = await getUserInfo();
        userMessage.value = res.data;
      }

      getUserMessage();
      const user = computed(() => {
        return userModule.getUserInfo;
      });

      const loginStatus = computed(() => {
        return userModule.getLoginStatus;
      });

      function toLogin() {
        console.log(ROUTER_PATHS.LOGIN);
        router.navigateTo({
          url: ROUTER_PATHS.LOGIN
        });
      }
      type UserDataListItem = {
        text: string;
        value: string;
        url?: string;
        params?: Record<string, any>;
      };
      const userDataList = ref<UserDataListItem[]>([
        {
          text: '获赞',
          value: 'dynamicLoveCount'
        },
        {
          text: '关注',
          value: 'followCount',
          url: ROUTER_PATHS.CONTACTS
        },
        {
          text: '粉丝',
          value: 'fansCount',
          url: ROUTER_PATHS.FANS
        }
      ]);

      function toPage(item: UserDataListItem) {
        console.log('item', item);
        if (!item.url) {
          return;
        }

        router.navigateTo({
          url: item.url,
          params: item.params ? item.params : {}
        });
      }

      onShow(() => {
        useLoadConversations();
        getUserMessage();
      });

      return {
        userMessage,
        list,
        loginStatus,
        user,
        userDataList,
        toLogin,
        toPage
      };
    }
  });
</script>

<template>
  <view class="my">
    <view class="user-message">
      <view class="login" v-if="!loginStatus">
        <view class="login-img">
          <view class="login-content"></view>
          <view class="login-tips"> 未登陆 </view>
        </view>
        <oto-button
          @click.stop="toLogin"
          :custom-style="{
            width: '580rpx',
            height: '88rpx',
            marginBottom: '30rpx'
          }"
        >
          点击登陆
        </oto-button>
      </view>
      <view class="user" v-if="loginStatus">
        <view class="user-text">
          <image class="avartar" :src="user.avatarUrl" />
          <view class="user-info">
            <view class="nick-name">{{ user.nickName }}</view>
            <view class="person-text">{{ '别看我只是一只羊' }}</view>
          </view>
        </view>
        <view class="user-data">
          <template v-for="(item, index) in userDataList">
            <view class="data-item" :key="index" @click.stop="toPage(item)">
              <view class="data-item-title"> {{ item.text }} </view>
              <view class="data-item-value"> {{ userMessage[item.value] || 0 }} </view>
            </view>
          </template>
        </view>
      </view>
    </view>
    <view class="more-features">
      <more-features :list="list" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .my {
    min-height: 100vh;
    background: rgba(242, 242, 242, 1);
    .user-message {
      min-height: 350rpx;
      background: rgba(255, 255, 255, 1);
      .login {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .login-img {
          width: 240rpx;
          height: 240rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-bottom: 29rpx;

          .login-content {
            width: 160rpx;
            height: 160rpx;
            border-radius: 50%;
            background-color: aquamarine;
          }

          .login-tips {
            font-size: 36rpx;
            margin-top: 10rpx;
          }
        }
      }
      .user {
        margin-top: 60rpx;

        &-text {
          display: flex;
          align-items: center;

          .avartar {
            width: 160rpx;
            height: 160rpx;
            border-radius: 50%;
            margin-right: 60rpx;
            margin-left: 70rpx;
          }
          .user-info {
            .nick-name {
              color: rgba(51, 51, 51, 1);
              font-size: 42rpx;
              font-weight: 700;
              font-family: 'PingFang SC';
              text-align: left;
            }

            .person-text {
              color: rgba(153, 153, 153, 1);
              font-size: 26rpx;
              font-weight: 500;
              font-family: 'PingFang SC';
              margin-top: 20rpx;
            }
          }
        }

        &-data {
          display: flex;
          justify-content: space-between;
          padding: 64rpx 109rpx 0 109rpx;
          .data-item {
            &-title {
              font-family: 'PingFang SC';
              font-style: normal;
              font-weight: 500;
              font-size: 22rpx;
              line-height: 31rpx;

              /* 次要文字 */

              color: #999999;
              margin-bottom: 8rpx;
            }

            &-value {
              font-family: 'DIN Alternate';
              font-style: normal;
              font-weight: 700;
              font-size: 32rpx;
              line-height: 37rpx;
              text-align: center;
              /* 常规文字 */

              color: #666666;
            }
          }
        }
      }
    }

    .more-features {
      margin-top: 16rpx;
    }
  }
</style>
